<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
     <!-- 引入facicon.ico网页图标 -->
	<link rel="shortcut icon" href="favicon.ico"  type="image/x-icon"/>
	<link rel="stylesheet" href="layui/dist/css/layui.css">
	<link rel="stylesheet" href="css/common.css">
	<link rel="stylesheet" href="css/index.css">
</head>
<body>
	<div class="layui-layout layui-layout-admin">
		<div class="layui-header">
		  <div class="layui-logo layui-hide-xs layui-bg-black">梦想之家</div>
		  <!-- 头部区域（可配合layui 已有的水平导航） -->
		  <ul class="layui-nav layui-layout-left">
			<!-- 移动端显示 -->
			<li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
			  <i class="layui-icon layui-icon-spread-left"></i>
			</li>
			
			<li class="layui-nav-item layui-hide-xs"><a href="javascript:;" onclick="change('led')">控制台</a></li>
			<li class="layui-nav-item layui-hide-xs"><a href="javascript:;">个人中心</a></li>
			<li class="layui-nav-item layui-hide-xs"><a href="javascript:;">游戏乐园</a></li>
			<li class="layui-nav-item">
			  <a href="javascript:;">待开发</a>
			  <dl class="layui-nav-child">
				<dd><a href="">menu 11</a></dd>
				<dd><a href="">menu 22</a></dd>
				<dd><a href="">menu 33</a></dd>
			  </dl>
			</li>
			
			
		  </ul>
		  <ul class="layui-nav layui-layout-right">
			<li class="layui-nav-item layui-hide layui-show-md-inline-block">
			  <a href="javascript:;">
			   <img id="loginImg" src="//tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg" class="layui-nav-img">
			  <span id="userName">游客</span>
			  </a>
			  <dl class="layui-nav-child">
				  <dd><a href="javascript:;">修改信息</a></dd>
				  <dd><a href="javascript:;">安全管理</a></dd>
				  <dd id="loginStyle"><a href="/templates/user/login.html">登录</a></dd>
				  <dd onclick="logout()" id="logoutStyle" ><a href="javascript:;">退出</a></dd>
			  </dl>
			</li>
			<li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
			  <a href="javascript:;">
				<i class="layui-icon layui-icon-more-vertical"></i>
			  </a>
			</li>
		  </ul>
		</div>
		
		<div class="layui-side layui-bg-black">
		  <div class="layui-side-scroll">
			<!-- 左侧导航区域（可配合layui已有的垂直导航） -->
			<ul class="layui-nav layui-nav-tree" lay-filter="test">
			  <li class="layui-nav-item layui-nav-itemed">
				<a class="" href="javascript:;">用户中心</a>
				<dl class="layui-nav-child">
				  <dd class="layui-this"><a href="javascript:;" onclick="change('userInfo')">信息查询</a></dd>
				</dl>
			  </li>
			  <li class="layui-nav-item">
				<a href="javascript:;">设备详情</a>
				<dl class="layui-nav-child">
				  <dd><a href="javascript:;" onclick="change('bar')">直方图</a></dd>
				  <dd><a href="javascript:;" onclick="change('pie')">饼状图</a></dd>
				</dl>
			  </li>
			  <li class="layui-nav-item"><a href="javascript:;">click menu item</a></li>
			</ul>
		  </div>
		</div>
		
		<div class="layui-body">
		  <!-- 内容主体区域 -->
			<iframe src="/templates/user/userInfo.html" frameborder="0" id="demoAdmin" style="width: 100%; height: 800px; border-radius: 2px;"></iframe>   
		
		<!-- <div class="layui-footer">
		  <!-- 底部固定区域 -->
		  <!-- 底部固定区域 -->
		</div> -->
	  </div>
	<script src="layui/layui.js"></script>
	<script src="layui/jquery-1.8.3.min.js"></script>
	<script src="js/core.util.js"></script>
	<script src="js/user/index.js"></script>
	<script>
		function change(title){
			let url = '';
			switch(title){
				case 'bar':
					url = "templates/echarts/bar.html";
					break;
				case 'pie':
					url = "templates/echarts/pie.html";
					break;	
				case 'userInfo':
					url = "templates/user/userInfo.html";
					break;
				case 'led':
					url = "templates/ESP32/led.html";
					break;
			}
			$('iframe').attr('src',url);
		}
	</script>
	  <script>
	  //JS 
	  layui.use(['element', 'layer', 'util'], function(){
		var element = layui.element
		,layer = layui.layer
		,util = layui.util
		,$ = layui.$;
		
		//头部事件
		util.event('lay-header-event', {
		  //左侧菜单事件
		  menuLeft: function(othis){
			layer.msg('展开左侧菜单的操作', {icon: 0});
		  }
		  ,menuRight: function(){
			layer.open({
			  type: 1
			  ,title: '更多'
			  ,content: '<div style="padding: 15px;">处理右侧面板的操作</div>'
			  ,area: ['260px', '100%']
			  ,offset: 'rt' //右上角
			  ,anim: 5
			  ,shadeClose: true
			  ,scrollbar: false
			});
		  }
		});
		
	  });
	  </script>
	  
	</body>
</html>